<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-empty> </pure-empty>
        </a-demo>

        <a-demo title="自定义图标">
            <pure-empty icon="/static/icons/empty.png"></pure-empty>
        </a-demo>

        <a-demo title="自定义提示语">
            <pure-empty tip="啊欧，购物车空空如也~"></pure-empty>
        </a-demo>

        <a-demo title="隐藏提示语" desc="将提示语设置为空即可隐藏提示语">
            <pure-empty tip=""></pure-empty>
        </a-demo>

        <a-demo title="显示按钮">
            <pure-empty btn></pure-empty>
        </a-demo>

        <a-demo title="按钮配置" desc="通过 btnProps 设置按钮 props">
            <pure-empty btn :btnProps="btnProps" @getphonenumber="handleGetPhoneNumber"></pure-empty>
        </a-demo>

        <a-demo title="按钮自定义类名" desc="通过 btnClass 给按钮添加自定义类名">
            <pure-empty btn btnClass="pure-button-danger"></pure-empty>
        </a-demo>

        <a-demo title="自定义底部内容" desc="通过默认 slot 自定义底部内容">
            <pure-empty>
                <template #default>
                    <view class="empty-buttons">
                        <pure-button class="empty-button pure-button-success" text="返回首页"></pure-button>
                        <pure-button class="empty-button pure-button-warning" text="继续逛逛"></pure-button>
                    </view>
                </template>
            </pure-empty>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 按钮props
    const btnProps = ref({
        text: "返回首页",
        openType: "getPhoneNumber",
    });

    // 获取手机号
    function handleGetPhoneNumber(e) {
        console.log("handleGetPhoneNumber", e);
    }
</script>

<style scoped>
    .empty-buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
</style>
